import $Element from "@/core/Element";
import { DrageMove, EDrageDirection } from "@/core/events/DrageMove";
import { DOMcreateElement } from "@/core/jsxFactory";


export default function HColorPickerCreater(mouseMoveFn:(evt: Event) => void,mouseUpFn:(evt: Event) => void){
    const current = new $Element(
        <div className="color-picker-h">
            <div className="drag-bar"></div>
        </div>
    );
    const eventHandler = DrageMove(current,new $Element(".drag-bar"),{
        dragBothDirct: EDrageDirection.Y
    });
    current.addEventListener("mouseup",function(evt:Event){
        const event = evt as MouseEvent;
        if(event.target == current.current){
            current.getChild(".drag-bar").setStyleWithProp("top", event.offsetY+"px");
            mouseUpFn(evt);
            event.preventDefault();
            event.stopPropagation();
            return false;
        }
        
    });

    eventHandler.addEventEndHook("mousemove",mouseMoveFn).addEventEndHook("mouseup",mouseUpFn);
    return current;
}